<!DOCTYPE html>
<#assign ctx=Session.basePath>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>船E行</title>
    <script>
        var basePath = '${ctx}';
        var company =  '<#if company??>${company}<#else></#if>';
    </script>
<#--<#include "../../include/include.ftl">-->
    <link href="${ctx}/map/js/ol2/theme/default/style.css" rel="stylesheet" />
    <link href="${ctx}/map/css/index.css" rel="stylesheet" />
    <script src="${ctx}/map/js/jquery-1.11.3.min.js"></script>
    <script src="${ctx}/map/js/screen.js"></script>
<#--<script src="${ctx}/map/js/ol2/OpenLayers.js"></script>-->
<#--<script src="${ctx}/map/js/ol2/Olinit.js"></script>-->
    <script src="${ctx}/js/map.js"></script>
    <#--<script src="${ctx}/map/js/tool.js"></script>-->
    <#--<script src="${ctx}/map/js/tool.js"></script>-->
    <script src="${ctx}/pagination/js/layer/layer.js"></script>

<#--<#include "../../include/include.ftl">-->
    <link rel="stylesheet" type="text/css" href="${ctx}/CYXMAP/js/openlayer/ol.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/CYXMAP/css/index.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/CYXMAP/js/openlayer/plugin/layerswitcher/ol3-layerswitcher.css">
    <script type="text/javascript" src="${ctx}/CYXMAP/js/openlayer/ol-debug.js" ></script>
    <script type="text/javascript" src="${ctx}/CYXMAP/js/index.js"></script>
    <script type="text/javascript" src="${ctx}/CYXMAP/js/layer/layer.js"></script>
    <script type="text/javascript" src="${ctx}/CYXMAP/js/openlayer/plugin/layerswitcher/ol3-layerswitcher.js"></script>
    <script src="${ctx}/laydate/laydate.js"></script>
</head>
<body>
<div class="menu">
    <ul>
        <li><a href="#" id="shipList">船舶列表</a></li>
        <li><a href="#" id="touchLine">报告记录</a></li>
        <li><a href="#" id="voyage">航次报告</a></li>
        <li><a href="#" id="accident">险情报告</a></li>
        <li><a href="#" id="message">发布消息</a></li>
        <li><a href="#" id="warning">警告信息</a></li>
        <li><a href="#" id="findShip">船舶搜索</a></li>
        <li><a href="#" id="watersManager">水域管理</a></li>
        <li><a href="#" id="reportLineInfo">报告线管理</a></li>
        <li><a href="#" id="alarmMarker">VTS管理</a></li>
        <li><a href="#" id="serverPointCheck">服务点审核</a></li>
        <li><a href="#" id="serverShipCheck">服务船舶审核</a></li>
    </ul>
</div>

<div id="tool-bar1" style="top: 3px;">

        <div id="stop-watch" class="ol-unselectable ol-control">
            <button type="button" onclick="stopWatch();" title="停止跟踪">S</button>
        </div>
        <div id="polygon-button" class="ol-unselectable ol-control  tool-button draw-button">
            <button type="button"  onclick="drawPolygons();" title="绘面">面</button>
        </div>
        <div id="line-button" class="ol-unselectable ol-control tool-button draw-button">
            <button type="button"  onclick="drawLines()" title="绘线">线</button>
        </div>
        <div id="point-button" class="ol-unselectable ol-control  tool-button draw-button">
            <button  type="button"  onclick="drawPoints();" title="绘点">点</button>
        </div>
        <div id="none-button" class="ol-selectable ol-control tool-button draw-button">
            <button style="background-color: orange" type="button"  onclick="drawNone();" title="清除画笔">C</button>
        </div>

</div>


<div id="map1" class="map">
    <div  class="mouse-position" id="mouse-position1">
    </div>
    <div id="track-ship1" class="track-ship"></div>
</div>
<div id="popup1" class="ol-popup">
    <a href="#" id="popup-closer1" class="ol-popup-closer"></a>
    <div id="popup-content1"></div>
</div>

<script src="${ctx}/CYXMAP/js/olutil.js"></script>
<script type="text/javascript">
    window.onresize = reload;
    $(document).ready(function() {
        initMap('map1','mouse-position1','popup1');
        oneMap();
        setTimeout(getAis, 5000);
    });
//    console.log(new Date().toUTCString());
</script>
<script type="text/javascript">
    var features = new ol.Collection();
    var source = new ol.source.Vector({features: features});


    var draw; // global so we can remove it later

    var vector = new ol.layer.Vector({
        title:"告警绘图",
        source: source,
        style: new ol.style.Style({
//            fill: new ol.style.Fill({
//                color: 'white'
//            }),
            stroke: new ol.style.Stroke({
                color: '#00FF00',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#FF5500'
                }),
                stroke: new ol.style.Stroke({
                    color: '#00FF00',
                    width: 2
                })
            })
        })
    });

    var typeSelect='None';
    function drawPoints(){
        typeSelect='Point';
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.removeInteraction(draw);
        ol.Observable.unByKey(mapArray[0].listener);
        ol.Observable.unByKey(l);
        addInteraction();
    }
    function  drawLines(){
        typeSelect='LineString';
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.removeInteraction(draw);
        ol.Observable.unByKey(mapArray[0].listener);
        ol.Observable.unByKey(l);
        addInteraction();
    }
    function  drawPolygons(){
        typeSelect='Polygon';
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.removeInteraction(draw);
        ol.Observable.unByKey(mapArray[0].listener);
        ol.Observable.unByKey(l);
        addInteraction();
    }
//    function  drawCircles(){
//        typeSelect='Circle';
//        mapArray[0].map.removeInteraction(mapArray[0].select);
//        mapArray[0].map.removeInteraction(draw);
//        addInteraction();
//    }
    function  drawNone(){
        typeSelect='None';
        mapArray[0].map.removeInteraction(draw);
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.addInteraction(mapArray[0].select);
        addEvent(mapArray[0]);
        ol.Observable.unByKey(l);
    }

    function addInteraction() {
        var value = typeSelect;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
                source:  source,
                type: /** @type {ol.geom.GeometryType} */ (typeSelect),
                style: new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(0, 0, 0, 0.5)',
                        width: 2
                    }),
                    image: new ol.style.Circle({
                        radius: 5,
                        stroke: new ol.style.Stroke({
                            color: 'rgba(0, 0, 0, 0.7)'
                        }),
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 0.2)'
                        })
                    })
                })
            });
            mapArray[0].map.addInteraction(draw);
            drawEnd(draw,mapArray[0]);
        }

    }
    function remove()
    {
        var l=select.getFeatures().getLength();
        for (var x=0 ;x<l;x++) {
            for (var y=0;y<features.getLength();y++) {
                if(select.getFeatures().getArray()[0]==features.getArray()[y])
                {
                    select.getFeatures().removeAt(0);
                    features.remove(features.item(y));
                    break;
                }

            }
        }
    }
</script>
</body>
</html>
<script type="text/javascript">
    var loadlayer;
//    $(document).ajaxStart(function () {
//        loadlayer = layer.load(0, {
//            //offset: '200px'
//        });
//    });
    $(document).ajaxComplete(function (event, request, settings) {
        if (loadlayer != null) {
            layer.close(loadlayer);
        }
    });
    $(document).ajaxError(function () {
        if (loadlayer != null) {
            layer.close(loadlayer);
        }
    });

//    $(function () {
//            init();
//        })
</script>